<template>
  <div class="node-key">
    <tiny-tree-menu
      ref="treeMenu"
      class="tree-menu-demo"
      :props="{children: 'children', label: 'menuName', disabled: 'disabled',isLeaf:''}"
      :data="store.menu"
      :default-expanded-keys="expandedKeys"
      only-check-children
      node-key="menuCode"
      :expand-on-click-node="true"
      @node-click="handleNodeClick">
      <template #default="slotScope">
        <vo-icon :iconName="slotScope.data.menuIcon" size="17px" padding="0 3px" ></vo-icon>
        <span :target="slotScope.data.target" :class="slotScope.data.class">
          {{ slotScope.data.menuName }}
        </span>
      </template>
    </tiny-tree-menu>
  </div>
</template>

<script setup>
  import {ref, reactive, onMounted, getCurrentInstance} from 'vue';
  import {Modal, Notify, TreeMenu as TinyTreeMenu} from '@opentiny/vue';
  import {useRouter} from 'vue-router';
  const router = useRouter();
  const treeMenu = ref(null);
  const expandedKeys = ref([]);
  import {cosSystem} from '@/stores/system.js';
  let {proxy} = getCurrentInstance();
  const data = reactive({});
  let store = cosSystem();
  onMounted(() => {
    //加载菜单
    reflshMenu();

  });
  // 刷新菜单重新定位菜单位置
  const reflshMenu = () => {
    let r = router.currentRoute.value;
    treeMenu.value.setCurrentKey(r.name)
    expandedKeys.value = [r.name]
  }
  const handleNodeClick = data => {
    //有子菜单不跳转
    if(data.children){
      return;
    }
    // 路由中没有该菜单的跳转信息
    if (router.hasRoute(data.menuCode)) {
        router.push({path:data.routerPath});
      } else {
        Modal.message({message: '跳转信息有误', status: 'warning'});
      }
  };

  data.treeData = [
    {
      id: 'home',
      label: '首页',
      class: 'treeClass',
    },
    {
      id: 'guide',
      label: '指南',
      class: 'treeNodeClass',
      children: [
        {
          id: 201,
          label: '引入组件',
          url: '/about',
        },
        {id: 202, label: '后端适配器'},
        {id: 203, label: '服务代理'},
        {id: 204, label: '构建部署'},
      ],
    },
    {
      id: 'component',
      label: '组件',
      children: [
        {
          id: 300,
          label: '组件',
        },
        {
          id: 301,
          label: '表单组件',
        },
        {id: 302, label: '数据组件'},
        {id: 303, label: '导航组件'},
        {id: 304, label: '业务组件'},
      ],
    },
    {
      id: 'book',
      label: '教程',
      children: [
        {
          id: 401,
          label: '页面布局',
          children: [
            {id: 40101, label: '添加标签页', url: ''},
            {id: 40102, label: '标签页配置', url: ''},
          ],
        },
        {
          id: 402,
          label: '查询功能',
          children: [
            {id: 40201, label: '添加查询页面', url: ''},
            {id: 40202, label: '列表属性配置', url: ''},
            {id: 40203, label: '通讯录查询', url: ''},
          ],
        },
        {
          id: 403,
          label: '新增功能',
          children: [
            {id: 40301, label: '表单新增功能', url: ''},
            {id: 40302, label: '表单数据验证', url: ''},
          ],
        },
        {
          id: 404,
          label: '编辑功能',
          children: [
            {id: 40401, label: '开启编辑功能', url: ''},
            {id: 40402, label: '保存表格数据', url: ''},
          ],
        },
      ],
    },
    {
      id: 500,
      label: '规范',
    },
    {
      id: 600,
      label: '性能',
    },
    {
      id: 700,
      label: '案例',
    },
    {
      id: 800,
      label: '更新日志',
    },
  ];
</script>
<style lang="scss" scoped>
  .menu {
    background-color: bisque;
  }
  .tiny-tree-menu {
    width: 200px;
    //height: calc(100vh - 100px);
    overflow-y: hidden;
    ::-webkit-scrollbar {
      display: none;
    }
    .tiny-input {
      max-width: 180px;
    }
  }
  :deep(.tiny-tree) {
    height: calc(100vh - 100px);
    overflow-y: auto;
  }
</style>
